@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <button class="btn" onclick="history.go(-1);">
                            <span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>
                        </button>
                        生命密码-相处技巧设置</div>

                    <div class="panel-body">
                        <h3 class="panel_title">基本信息</h3>
                        <div class="talent_info row">
                            <div class="col-md-4">主性格数字： </div>
                            <div class="col-md-4">{{ $talent->main_number }}</div>
                        </div>

                        <div class="talent_info row">
                            <div class="col-md-4">一句话描述： </div>
                            <div class="col-md-4">{{ $talent->brief }}</div>
                        </div>

                        {{--<div class="line"></div>--}}

                        <h3 class="panel_title">相处技巧列表</h3>
                        <table class="table  table-hover">
                            <tr>
                                <th style="width:20%;">关联主性格数字</th>
                                <th>相处技巧</th>
                                <th style="width: 20%;">操作</th>
                            </tr>

                            @foreach($talent->relationships as $item)
                            <tr>
                                <td>{{ $item->relate_number }}</td>
                                <td>{!! $item->relationship !!}  </td>
                                <td>
                                    <a href="javascript:void(0);" onclick="modifyRelationship({{ $item->toJson() }})" class="btn btn-success btn-sm">修改</a>
                                    <a href="javascript:void(0);" onclick="deleteRelationship({{ $item->toJson() }})" class="btn btn-danger btn-sm">删除</a>
                                </td>
                            </tr>
                            @endforeach


                        </table>

                        <h3 class="panel_title">相处技巧表单</h3>


                        <form class="form-horizontal" id="form">
                            {{ csrf_field() }}
                            <input type="hidden" name="id" id="id">
                            <input type="hidden" name="talent_id" id="talent_id" value="{{ $talent->id }}">
                            <input type="hidden" name="main_number" id="main_number" value="{{ $talent->main_number }}">

                            <div class="form-group{{ $errors->has('main_number') ? ' has-error' : '' }}">
                                <label for="email" class="col-md-4 control-label">主数字</label>

                                <div class="col-md-6">
                                    <input id="relate_number"  type="number" class="form-control" name="relate_number" value="{{ old('email') }}" required autofocus>

                                    @if ($errors->has('main_number'))
                                        <span class="help-block">
                                        <strong>{{ $errors->first('main_number') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>


                            <div class="form-group{{ $errors->has('description') ? ' has-error' : '' }}">
                                <label for="description" class="col-md-4 control-label">相处技巧</label>

                                <div class="col-md-6">
                                    <textarea name="relationship" id="relationship" style="display: none;"></textarea>

                                </div>
                            </div>



                            <div class="form-group">
                                <div class="col-md-8 col-md-offset-4">
                                    <button type="button" onclick="handleSubmit();" class="btn btn-primary">
                                        保存
                                    </button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('script')
    <script type="text/javascript">
        var layedit = null;
        var skill_editarea_index = null;
        layui.use('layedit', function(){
            layedit = layui.layedit;
            skill_editarea_index = layedit.build('relationship'); //建立编辑器
        });

        /**
         * 删除
         * @param r_id
         */
        function deleteRelationship(relationship) {
            if(confirm("确定删除么？")) {
                const url = "<?php echo route('relationship_delete')?>";
                // $("#id").val(relationship.id);
                const jsonData = $('#form').serializeJSON();
                const data = {
                    id: relationship.id,
                    _token: jsonData._token
                }
                ajaxSubmit(url,data);
            }
            return 0;
        }

        /**
         * 修改
         */
        function modifyRelationship(relationship) {
            // console.log(relationship);
            $('#id').val(relationship.id);
            $('#main_number').val(relationship.main_number);
            $('#relate_number').val(relationship.relate_number);
            $('#talent_id').val(relationship.talent_id);
            $('#relationship').val(relationship.relationship);
            // layedit.sync(skill_editarea_index);
            skill_editarea_index = layedit.build('relationship'); //建立编辑器

        }

        function handleSubmit() {
            layedit.sync(skill_editarea_index);
            // console.log('submit');
            const jsonData = $('#form').serializeJSON();

            const url = "<?php echo route('relationship_save')?>";

            ajaxSubmit(url, jsonData);
            return 0;
        }

        function ajaxSubmit(url,data) {
            $.ajax({
                url: url ,
                type:'POST', //GET
                async:true,    //或false,是否异步
                data: data,
                // headers: {
                //     'X-CSRF-TOKEN': $('input[name="_token"]').val()
                // },
                timeout:5000,    //超时时间
                dataType:'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                beforeSend:function(xhr){
                    console.log(xhr)
                    console.log('发送前')
                },
                success:function(data,textStatus,jqXHR){
                    console.log('success');
                    console.log(data)
                    console.log(textStatus)
                    console.log(jqXHR)

                    if(!data.errors){
                        alert("操作成功！");
                        location.reload();
                    }else {
                        alert("操作失败！");
                    }
                },
                error:function(xhr,textStatus){
                    console.log('错误')
                    console.log(xhr)
                    console.log(textStatus)
                },
                complete:function(){
                    console.log('结束')
                }
            })
        }


    </script>

@endsection
